<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <style>
        .account-money-box {border:1px solid #ccc; padding:10px; margin-bottom: 15px;}
        .account-money-box div strong{ font-size: 16px;}
        .orderDetail-item {position: relative;}
        .orderDetail-item p {text-align: left;}
        .orderDetail-item .status {position:absolute; top:10px; right:10px; padding:5px 15px; border:1px solid #204d74}
    </style>
</head>
<body>
<shiro:hasPermission name="sys:product:add">
    <input id="p_add"  value="1" type="hidden">
</shiro:hasPermission>
<shiro:hasPermission name="sys:product:update">
    <input id="p_update"  value="1" type="hidden">
</shiro:hasPermission>

<div class="panel panel-f5" id="app">
    <!-- 分页查询的地址-->
    <div class="panel-body panel-white">
        <div class="account-money-box">
            <div><strong>龙币金额：{{dataObj.dragonMoney}}</strong>（元）</div>
            <div><strong>限制提现金额：{{dataObj.limitedMoney}}</strong>（元）</div>
            <div><strong>可提现金额：{{dataObj.availableMoney}}</strong>（元）</div>
        </div>
        <div class="table-responsive">
            <table id="myTable"
                   class="table table-hover"
                   data-url="${basePath}/admin/coupons/member/selectAccountList"
                   data-pageSize="10,50,100" data-method="GET">
                <thead>
                <!-- 需要循环的字段  对应mapper文件-->
                <tr>
                    <th  data-field="orderDetail" data-call="true"></th>
                </tr>
                </thead>
                <tbody id="tbodyId">
                    <div class="orderDetail-item" style="padding:12px">
                        <p>订单编号：{{orderId}}</p>
                        <span v-for="type in dataObj.acountList">
                            <p>可用{{type.name}}：{{type.containNum}}张</p>
                        </span>

                        <p>龙币金额：{{dataObj.dragonMoney}}元</p>
                        <p>限制提现期限：{{dataObj.limitTime}}天</p>
                        <p>每天返现：{{dataObj.dailyIncome || 0}}元</p>
                        <p>{{dataObj.cashbackTime}}天返现率：{{dataObj.cashbackRatio}}%</p>

                        <span class="status" v-if="status==1">待支付</span>
                        <span class="status" v-if="status==2">购买成功</span>
                        <span class="status" v-if="status==3">已关闭</span>
                        <span class="status" v-if="status==4">返现中</span>
                        <span class="status" v-if="status==5">已到期</span>
                    </div>
                </tbody>
            </table>
        </div>
        <!-- 分页条-->
        <#--<div class="row">-->
            <#--<div align="left" class="col-xs-6">-->
                <#--<div class="input-group">-->
                    <#--<span class="input-group-addon" id="pageCount"></span> <select-->
                        <#--id="pageSize" onchange="search(1)" class="form-control"-->
                        <#--style="width: 100px"></select>-->
                <#--</div>-->
            <#--</div>-->
            <#--<div align="right" class="col-xs-6">-->
                <#--<ul class="pagination" id="pagination"></ul>-->
            <#--</div>-->
        <#--</div>-->
    </div>
</div>

<script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<#--<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>-->
<#--<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>-->
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            dataObj: {},
            status: null,
            orderId: ""
        },
        created: function () {
            var url = window.location.href;
            var orderId = url.split("order=")[1];

            var status = url.split("status=")[1];
            status = status.split("&")[0];
            this.status = status;
            this.orderId = orderId;

            var _this = this;

            $.ajax({
                url: '${basePath}/admin/agent/order/accountInformation?orderId='+orderId,
                type: 'GET',
                dataType: 'json',
                data: {},
                success: function(data){
                    _this.dataObj = data.result;
                },
                error: function(){
                    console.log("error")
                }
            })
        },
        methods: {

        }
    })

    //循环列表数据以及操作按钮
    function tableCallBack(data, id){
        if(id=='orderDetail') {
            var content = '';
            var temp = "";
            for(var i=0,len=data.productInfoProjectDtos.length;i<len;i++){
                temp += "<p>可用"+data.productInfoProjectDtos[i].name+"："+data.productInfoProjectDtos[i].containNum+"张</p>"
            }
            content = '<div class="orderDetail-item">' +
                        '<p>订单编号：'+data.orderId+'</p>' + temp +
                        '<p>龙币金额：'+data.orderYieldRatioDto.price+'元</p>' +
                        '<p>限制提现期限：'+data.orderYieldRatioDto.limitTime+'天</p>' +
                        '<p>每天返现：'+data.orderYieldRatioDto.dailyIncome+'元</p>' +
                        '<p>'+data.orderYieldRatioDto.cashbackTime+'天返现率：'+data.orderYieldRatioDto.cashbackRatio+'%</p>' +
                    '<span class="status">'+data.statusName+'</span>'
                    '</div>';

            return content;
        }
    }


</script>
</body>
</html>